<template>
  <view class="wrap">
    <status-bar></status-bar>
    <image src="../../static/login.png" mode="widthFix" class="loginBg"></image>
    <image src="../../static/close.png" class="close" @click="goBack"></image>
    <view class="center">
      <view class="logo">
        <image src="../../static/logo.png" class="img"></image>
      </view>
      <view class="desc">首次登录将自动为您创建账号</view>
      <button class="btn phone-login" :disabled="!disabled" :loading="loadings" @click="login">本机号码一键登录</button>
      <view class="goPhone" @click="goPhone">手机号验证码登录</view>
      <view class="protocol">
        <protocol-box :agree='agree' :protocol="protocol" @click="agree = !agree"></protocol-box>
      </view>
    </view>
    <login-footer :agree='agree'></login-footer>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { toast, loading } from '@/common';
import { useOrder, useUser } from '@/store';
import { post } from '@/api';

const iCloud = useOrder().ICloud;
const protocol = [{name: '《投研宝用户协议》', id: '5'}, {name: '《隐私政策》', id: '6'}];
let agree = ref(false);
let disabled = ref(true);
let loadings = ref(false);

function login(){
  if(!agree.value) return toast('请勾选用户协议');
  // #ifdef WEB
  toast('请前往APP登录');
  return;
  // #endif
  disabled.value = false;
  loadings.value = true;
  loading('正在登录', true);
  uni.login({
  	provider: 'univerify',
  	univerifyStyle: { 
      fullScreen: false,
      authButton: {
        normalColor: "#E43222",
        highlightColor: '#E43222',
        disabledColor: '#ff8787'
      },
      otherLoginButton: {
        visible: false
      },
      privacyTerms: {
        defaultCheckBoxState: false,
        isCenterHint: false,
        uncheckedImage: '/static/checkoff.png',
        checkedImage: '/static/checkon.png',
        checkBoxSize: 24,
        termsColor: '#E43222',
        prefix: '你已阅读同意',
        privacyItems: [
          {
            title: '用户协议',
            url: 'http://touyanbao-app-h5.sinmore.vip/#/pages/web?id=5'
          },
          {
            title: '隐私政策',
            url: 'http://touyanbao-app-h5.sinmore.vip/#/pages/web?id=6'
          }
        ]
      }
    },
    success: function (loginRes) {
      let user = loginRes.authResult;
      console.log(user);
      setLogin(user);
    },
    fail(err) {
      toast('授权失败');
      disabled.value = true;
      loadings.value = false;
      uni.hideLoading();
      console.log(JSON.stringify(err));
    },
    complete() {
      uni.closeAuthView()
    }
  })
}
function setLogin(dataObj){
  iCloud.callFunction({
    name: 'touyanbaoPhoneLogin',
    data: dataObj
  }).then(res => {
    if(res.result.code == 0){
      const { data } = res.result;
      console.log(data);
      setApiLogin(data);
    }
  })
}
function setApiLogin(data){
  console.log(data.phoneNumber);
  const params = {
    mobile: data.phoneNumber,
    captcha: '0000'
  }
  post('api/user/mobilelogin',params).then(res => {
    console.log(res);
    disabled.value = true;
    loadings.value = false;
    uni.hideLoading();
    if(res.code == 1){
      const data = res.data.userinfo;
      uni.setStorageSync('token', data.token);
      uni.setStorageSync('userInfo', data);
      useUser().setToken(data.token);
      useUser().setUserInfo(data);
      getUserInfoDetail(data.user_id);
      uni.reLaunch({
        url: '/pages/index/index'
      });
    }
  })
}
function getUserInfoDetail(id){
  const params = {
    access_user_id: id
  }
  post('api/user/getUserDetail', params).then(res => {
    if(res.code == 1){
      const data = res.data;
      uni.setStorageSync('userDetail', data);
      useUser().setUserDetail(data);
    }
  })
}
function goPhone(){
  uni.navigateTo({
    url: '/pages/login/phone'
  });
}
function goBack(){
  uni.navigateBack({
    delta: 1
  });
}
</script>

<style lang="scss" scoped>
  .center{
    width: 100%;
    position: fixed;
    left: 0;
    top: 40%;
    transform: translateY(-50%);
    .protocol{
      margin-top: 130rpx;
    }
    .goPhone{
      text-align: center;
      font-weight: 400;
      font-size: 28rpx;
      color: #EF4734;
      margin-top: 31rpx;
    }
    .phone-login{
      width: 360rpx;
      margin: 0 auto;
    }
    .desc{
      text-align: center;
      font-weight: 400;
      font-size: 24rpx;
      color: #898989;
      padding-top: 40rpx;
      padding-bottom: 30rpx;
    }
    .logo{
      width: 150rpx;
      height: 145rpx;
      margin: 0 auto;
    }
  }
  .close{
    width: 26rpx;
    height: 26rpx;
    margin-top: 30rpx;
    margin-left: 40rpx;
  }
  .loginBg{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 0;
  }
</style>